<template>
  <div class="player_list" v-if="musicList && musicList.length">
    <Scroll ref="scroll">
      <div class="player-list-top">
        <h4>播放列表</h4>
        <b-button type="text" class="vbestui-iconfont icon-close player_list_btn" color="var(--text-main-color)" transparent @click="closePlayerList"></b-button>
      </div>
      <SongList :musicList="musicList" :lines="lines" playing></SongList>
    </Scroll>
  </div>
</template>

<script>
import Scroll from '../components/common/scroll/scroll'
import SongList from '../components/common/song-list/SongList.vue'
export default {
  name: 'PlayerList',
  components: { Scroll, SongList },
  data() {
    return {
      lines: [true, false, true, true, false, true]
    }
  },
  props: {
    musicList: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    closePlayerList() {
      this.$parent.isGedan = false
    }
  },
  watch: {
    musicList() {
      this.$nextTick(() => {
        this.$refs.scroll.refresh()
      })
    }
  }
}
</script>

<style lang="less" scoped>
.player_list {
  width: 500px;
  height: 500px;
  position: absolute;
  top: -500px;
  right: 0;
  z-index: 99;
  background-color: #fff;
  box-shadow: 0 0 0.14286rem var(--border-tt);
  border-radius: 14px;
  .player-list-top {
    display: flex;
    h4 {
      width: 450px;
      display: flex;
      justify-content: center;
    }
    .player_list_btn {
      width: 50px;
      padding-right: 10px;
    }
  }
}
</style>
